<template>
		<div class="login_box">
		<div class="login_left">
			<img src="@/assets/images/login_left.png" class="login_leftback" />
			<img src="@/assets/images/login_leftlogo.png" class="login_leftlogo" />
		</div>
		<div class="login_main">
			<div class="login_form">
				<div class="login_formicon">登录</div>
				<div class="login_formmain">
					<el-form ref="loginForm" :model="loginForm" :rules="loginRules" autocomplete="on" label-position="left">
						<el-form-item prop="username">
							账号<br />
							<el-input ref="username" v-model="loginForm.username" size="large" placeholder="请输入用户名" name="username" type="text" tabindex="1" autocomplete="on">
							</el-input>
						</el-form-item>
						<el-form-item prop="password">
							密码<br />
							<el-input ref="password" v-model="loginForm.password" size="large" placeholder="请输入密码" name="password" tabindex="2" autocomplete="on" show-password @keyup.enter.native="handleLogin">
							</el-input>
						</el-form-item>
					</el-form>
				</div>
				<div class="login_formbtn">
					<el-button type='primary' @click.stop="handleLogin" :loading="loading">登录</el-button>
				</div>
			</div>
			<img src="@/assets/images/login_foot1.png" class="login_foot" />
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Login',
		data() {
			const validatePassword = (rule, value, callback) => {
				if(value.length < 3) {
					callback(new Error('密码不能少于三位!'))
				} else {
					callback()
				}
			}
			return {
				loginForm: {
					username: '',
					password: ''
				},
				loginRules: {
					username: [{
						required: true,
						trigger: 'blur',
						message: '请输入用户名'
					}],
					password: [{
						required: true,
						trigger: 'blur',
						validator: validatePassword,
						message: '请输入密码'
					}]
				},
				passwordType: 'password',
				capsTooltip: false,
				loading: false,
				redirect: undefined,
				otherQuery: {}
			}
		},
		watch: {
			$route: {
				handler: function(route) {
					const query = route.query
					if(query) {
						this.redirect = query.redirect
						this.otherQuery = this.getOtherQuery(query)
					}
				},
				immediate: true
			}
		},
		created() {

		},
		mounted() {
			if(this.loginForm.username === '') {
				this.$refs.username.focus()
			} else if(this.loginForm.password === '') {
				this.$refs.password.focus()
			}
		},
		destroyed() {

		},
		methods: {
			checkCapslock({
				shiftKey,
				key
			} = {}) {
				if(key && key.length === 1) {
					if(shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) {
						this.capsTooltip = true
					} else {
						this.capsTooltip = false
					}
				}
				if(key === 'CapsLock' && this.capsTooltip === true) {
					this.capsTooltip = false
				}
			},
			showPwd() {
				if(this.passwordType === 'password') {
					this.passwordType = ''
				} else {
					this.passwordType = 'password'
				}
				this.$nextTick(() => {
					this.$refs.password.focus()
				})
			},
			handleLogin() {
				this.$refs.loginForm.validate(valid => {
					if(valid) {
						this.loading = true
						var loginform = {
							username: this.loginForm.username,
							password: this.loginForm.password,
						}
						this.$store.dispatch('user/login', loginform)
							.then((res) => {
								if(res.code == '200') {
									this.$router.push({
										path:  '/',
									})
									this.loading = false
								} else {
									this.$message({
										message: res.message,
										type: 'error'
									})
									this.loading = false
								}
							})
							.catch((err) => {
								this.loading = false
							})
					} else {
						return false
					}
				})
			},
			getOtherQuery(query) {
				return Object.keys(query).reduce((acc, cur) => {
					if(cur !== 'redirect') {
						acc[cur] = query[cur]
					}
					return acc
				}, {})
			}
		}
	}
</script>

<style>
.login_box {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.login_left {
	width: calc(100% - 735px);
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	overflow: hidden;
}

.login_leftback {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	min-height: 100%;
	min-width: 100%;
}

.login_leftlogo {
	position: absolute;
	left: 240px;
	top: 100px;
	z-index: 1;
}

.login_main {
	width: 735px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	background: #FFFFFF;
}

.login_form {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	box-sizing: border-box;
	padding: 0 115px;
	width: 735px;
	z-index: 1;
	height: auto;
}

.login_formicon {
	height: 30px;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 30px;
	color: #000000;
	line-height: 30px;
	letter-spacing: 3px;
	width: 100%;
	margin: 0 0 72px;
	text-align: center;
}

.login_formmain {
	width: 100%;
	height: auto;
	margin: 0 0 65px 0;
}

.login_formpre {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
}

.login_formmain .el-input__inner {
	height: 56px;
	line-height: 56px;
	box-sizing: border-box;
	/* padding-left: 0; */
	border-radius: 0;
	/* border: none; */
}

.login_formmain .el-form-item {
	margin: 0 0 30px 0;
}

.login_formbtn {
	width: 100%;
	height: 60px;
}

.login_formbtn button {
	width: 100%;
	height: 60px;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 25px;
	color: #FFFFFF;
	background: #2961F2;
}

.login_formbtn button:hover,
.login_formbtn button:focus {
	background: #2961F2;
	color: #FFFFFF;
}

.login_foot {
	position: absolute;
	left: 50%;
	bottom: 55px;
	transform: translateX(-50%);
	z-index: 1;
}

</style>